<!DOCTYPE html>
<!-- <html manifest="sharamag15.manifest"> -->

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">	
    
    <title>Sharamag - Beta 1.5</title>
    <link rel="stylesheet" href="/static/css/ext-touch.css" type="text/css">
    <link rel="stylesheet" href="/static/css/style.css" type="text/css">
    <script type="text/javascript" src="/static/js/ext-touch.js"></script>
    <script type="text/javascript" src="/static/js/index.js"></script>

     <style>
        body {
            background-color: #376daa;
        }
        .card {
            text-align: center;
            color: #204167;
            text-shadow: #3F80CA 0 1px 0;
            font-size: 72px;
        }
        
        .x-phone .card {
            font-size: 36px;
        }

        .card p {
            font-size: 24px;
            line-height: 30px;
        }
        
        .x-phone .card p {
            font-size: 16px;
            line-height: 18px;
        }


    </style>

</head>
<body onorientationchange="setTimeout(function(){window.scrollTo(0,1)},100);updateOrientation();"
		onload ="setTimeout(function() {window.scrollTo(0,1)},100);">



<div id="backdrop1"><img src="/static/photos/00.jpg" height:100%  ></div>  
        
<div id="c1" {z-index:5;}>
        <div id="issue-wrapper">
            <div class="article-link">
                    <h1>{{publication.title}}</h1>
                    <div class="description">
                        <h2>{{publication.description}}</h2>
                    </div>
            </div>    
        </div>
</div>
        


{% for a in articles %} 
<div id="{{a.s_key}}"> 
    <div id="{{a.s_key}}-title">
        <div class="article-title">
            <h4>{{a.title}}</h4>
        </div>
    </div>
    
    <div id="article-wrapper">
        <div class="issue-container">



<div class="{% cycle 'right-side' 'left-side'%}">
   {{a.content}}
</div>
            </div>
            </div>
        
{% endfor %}

        
    
</body>
            
</html>
